<template>
    <div>
      <el-dialog
        title="考试计划"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
      <div>
      <el-row>
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础信息" name="first">
            <el-form ref="form"  :model="form" label-width="120px" :inline="true">
              <el-form-item label="试卷名称：" >
                <el-input style="width: 200px;" v-model="program.examinationPlanName" disabled></el-input>
              </el-form-item>
              <el-form-item label="及格分数：">
                <el-input style="width: 200px;" v-model="program.passScore" disabled></el-input>
              </el-form-item>
              <el-form-item label="培训人：">
                <el-input style="width: 200px;" v-model="program.teacherName" disabled></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName">
          <el-tab-pane label="参考人员" name="first">
            <el-table :data="program.studentList" style="width: 100%" height="300px">
              <el-table-column prop="studentName" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="referenceState" label="参考状态">
                  <template slot-scope="scope">
                    <el-tag
                      :type="scope.row.status == 0 ? 'danger' : 'success'"
                      disable-transitions
                      >{{ scope.row.status == 0 ? "未完成" : "已完成" }}</el-tag
                    >
                  </template>
              </el-table-column>
              <el-table-column prop="studentName" label="选择答案" width="180">
            </el-table-column>
            <el-table-column prop="studentName" label="考试时间" width="180">
            </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName">
          <el-tab-pane label="课件列表" name="first">
            <el-table :data="program.courseList" style="width: 100%" height="300px" :default-sort = "{prop: 'courseSecond', order: 'descending'}">
              <el-table-column prop="courseName" label="课件名">
              </el-table-column>
              <el-table-column prop="courseSecond" label="课件时长(秒)" sortable>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
      getExaminationPlanInfo
  } from "@/api/train/index.js";
  export default {
  
    data() {
      return {
          dialogVisible:false,
          activeName: "first",
        form: {},
        tableData: [
        ],
        program:{
          programName:''
        }
      };
    },
  
    mounted() {},
  
    methods: {
      show(id){
          this.dialogVisible = true;
          getExaminationPlanInfo({
              examinationPlanId:id
          }).then(res=>{
              console.log(res);
              this.program = res.data
          })
      },
      handleClose(){
          this.dialogVisible = false;
      }
    },
  };
  </script>
  
  <style lang="scss" scoped></style>
  